<template>
	<view class="content">
		<!-- 轮播图 -->
		<view class="showSlider">
			<image src="../../static/ban.png"></image>
		</view>
		<!-- 热门标签 -->
		<view style="font-size: 20rpx;margin-left: 10rpx;text-align: center;">热门专辑</view>
		<view class="tag">
			<button @click="album(item.abId)" v-for="item in tag" size="mini" style="background: #d8da54;" type="primary">#{{item.abName}}</button>
		</view>
			<view  style="box-sizing: border-box;padding: 10rpx;">
				<view v-for="item in nodes">
					<Node v-for="i in item" :node="i" :iscollent="false"></Node>
					
				</view>
				
			</view>
	</view>
</template>

<script>
	import Node from "../../compoent/node/node.vue"
	export default {
		components:{Node},
		data() {
			return {
				nodes:[],
				tag:null
			}
		},
		onReady() {
			this.initTag()
			this.initData()
		},
		
		onPullDownRefresh(){
			this.nodes= []
			this.initData()
		},
		onReachBottom() {
			// 刷新数据
			this.initData()
		},
		onShareAppMessage(res) {
			return {
			   title: "waterghost-万能头像库",
			   path: "/pages/details/details?id="+res.target.dataset.id
			}
		},
		onLoad() {
			qq.subscribeAppMsg({
			  subscribe: true,
			});
		},
		methods: {
			album(id){
				uni.navigateTo({
					url:"../album/album?abId="+id
				})
			},
			initTag(){
				var that = this;
				uni.request({
					url:"https://app.waghost.com/api/album/albumsorder",
					method:"get",
					success(va){
						that.tag = va.data.data
					}
				})
			},
			initData(){
			// 请求接口渲染数据
				var that = this;
				uni.request({
					url:"https://app.waghost.com/api/node/getNodes",
					method:"get",
					success(va){
						// 时间格式化
						for(var i = 0 ; i<va.data.data.length;i++){
							var date = new Date(va.data.data[i].nodeTime)
							va.data.data[i].nodeTime = date.getFullYear()+"/"+date.getMonth()+"/"+date.getDay()+" :"+date.getHours()+":"+date.getMinutes()
						}
						that.nodes.push (va.data.data)
					}
				})
			
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.showSlider>image{
		width: 100%;
		height: 300rpx;
	}
	.tag{
		box-sizing: border-box;
		padding-top: 10rpx;
		text-align: center;		
		margin-top: 10rpx;
	}
	.tag button{
		margin-right: 10rpx;
		font-size: 20rpx;
		border-radius: 5px !important;
	}
</style>
